<template>
  <div class="search-container">
    <header-box :name="'搜索页面'"></header-box>
    <search-box></search-box>

    <div class="hot-clum wid">
      <div class="index-tit wid">
        热门搜索
      </div>
      <p v-for="(item,i) in cartclum" :key="i">{{item.name}}</p>
    </div>
    <ul class="hot-container wid">

      <li v-for="item in  cartlist" :key="item.id" @click="goArticle(item.id)">
        <div class="img-box">
          <img :src="item.albums[0]" alt="">
        </div>
        <h4>{{item.title}}</h4>
        <p>
          <span>
            <i class="iconfont icondengji"></i>
            {{item.tags}}
          </span>
          <span>
            点击<b>{{item.id}}</b>次
          </span>
        </p>
      </li>

    </ul>
  </div>

</template>

<script>
  import Header from "../../components/tabbar/Header.vue"
  import Search from "../../components/subcomponent/search.vue"
  export default {
    data() {
      return {
        cartlist: [],
        cartclum: [],
      }
    },
    created() {
      this.Getlist();
      this.Getcartclum();
    },
    methods: {
      Getlist() {
        this.$http.get("json/cart/cart-list.json").then(result => {
          if (result.body.resultcode == 200) {
            this.cartlist = result.body.result.data;
            this.cartlist = this.cartlist.slice(0, 10);
            for (var i = 0; i < this.cartlist.length; i++) {
              this.cartlist[i].tags = this.cartlist[i].tags.slice(0, 5) + '...'
            }
          } else {
            Toast("数据加载失败");
          }
        });
      },
      Getcartclum() {
        this.$http.get("json/cart/cart-clum.json").then(result => {
            if (result.body.resultcode == 200) {
              this.cartclum = result.body.result.slice(0, 12);
            } else {
              Toast("数据加载失败");
            }
          });
      },
      goArticle(id) {
        this.$router.push('/cart/article/' + id)
      },

    },
    components: {
      "header-box": Header,
      "search-box": Search
    }

  }

</script>

<style lang="scss">

</style>
